<template>
	<div>
		<div ref="target" class="w-full h-full"></div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
	data: {
		type: Array,
		required: true
	}
})

const target = ref(null)
let mChart = null
onMounted(() => {
	mChart = echarts.init(target.value)
	renderChart()
})

const totoaldate=props.data.slice(1, 11).map(person => {
				const date = new Date(person.times*1000);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const formattedTime = `${year}.${month}`;
				return formattedTime;
			}).reverse()

			const color=
[
    "#1DE9B6",
    "#F46E36",
    "#04B9FF",
    "#5DBD32",
    "#FFC809",
    "#FB95D5",
    "#BDA29A",
    "#6E7074",
    "#546570",
    "#C4CCD3"
]


const renderChart = () => {
	let options = {
		// 时间线，提供了在多个 ECharts option 间进行切换
		timeline: {
			// 数据
			data:totoaldate,
			// 类目轴
			axisType: 'category',
			// 自动切换
			autoPlay: true,
			// 间隔时间
			playInterval: 3000,
			// 位置
			left: '5%',
			right: '5%',
			bottom: '0%',
			width: '90%',
			// 轴的文本标签
			label: {
				// 默认状态
				normal: {
					textStyle: {
						color: '#ddd'
					}
				},
				// 高亮状态
				emphasis: {
					textStyle: {
						color: '#fff'
					}
				}
			},
			// 文字大小
			symbolSize: 10,
			// 线的样式
			lineStyle: {
				color: '#555'
			},
			// 选中点的样式
			checkpointStyle: {
				borderColor: '#888',
				borderWidth: 2
			},
			// 控件样式
			controlStyle: {
				// 上一步按钮
				showNextBtn: true,
				// 下一步按钮
				showPrevBtn: true,
				// 默认样式
				normal: {
					color: '#666',
					borderColor: '#666'
				},
				// 高亮样式
				emphasis: {
					color: '#aaa',
					borderColor: '#aaa'
				}
			}
		},
		// 柱形图展示位置
		baseOption: {
			grid: {
				right: '4%',
				left:'14%',
				top: '15%',
				bottom: '20%',
				width: '82%'
			},
		},
		// 绑定时间轴下的多个图表
		options: []
	}
	// 为每一年度的图表添加数据
	totoaldate.forEach((item, index) => {
		options.options.push({
			// 背景色
			// backgroundColor: '#142037',
			title: [
				// 副标题，对应柱形图
				{
					text: item + '参与人数Top10项目',
					right: '5%',
					top: '2%',
					textStyle: {
						color: '#ccc',
						fontSize: 20
					}
				}
			],
			// X 轴配置
			xAxis: {
				// 数据轴
				type: 'value',
				// 脱离 0 值比例
				scale: true,
				// 位置
				position: 'top',
				// 不显示分割线
				splitLine: {
					show: false
				},
				// 显示轴线
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ddd'//颜色深一点
					}
				},
				// 显示刻度尺
				axisTick: {
					show: true
				},
				// 类别文字
				axisLabel: {
					margin: 2,
					textStyle: {
						color: '#aaa'
					}
				}
			},
			// Y 轴
			yAxis: {
				// 选项轴
				type: 'category',
				// 轴线
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ddd'
					}
				},
				// 轴刻度
				axisTick: {
					show: false,
					// lineStyle: {
					// 	color: '#ddd'
					// }
				},
				// 轴标签
				axisLabel: {
					interval: 0,
					margin: 5,
					textStyle: {
						color: '#ddd'
					}
				},
				// 根据年份，获取对应数据
				// data: [1,2,3,4,5,6,7,8,9,"10ssssssssss"]
				
				data: Object.keys(JSON.parse(props.data.at(index+1).people_top10.replace(/'/g,`"`))).map(key=>{
						return key
					}).reverse()
			},
			// 核心配置
			series: [
				{
				// 柱形图
				type: 'bar',					
				zlevel: 1.5,
				// 显示背景
				showBackground: true,
				// 背景色
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				},					
				// 背景色
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				},	
				// 轴宽度
				// barWidth: 5,				

					// 每个柱子的色值
					itemStyle: {
						normal: {
							color: color[index]
						}
					},
					label: {
					show: true,
					// 设置标签位置为右侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: '#fff'
					}
				},
					// 根据年份，获取对应数据
					data: Object.keys(JSON.parse(props.data.at(index+1).people_top10.replace(/'/g,`"`))).map(key=>{
						return {
							name:key,
							value:JSON.parse(props.data.at(index+1).people_top10.replace(/'/g,`"`))[key]
						}
					}).reverse()
				},
			]
		})
	})
	console.log(123,options);
	mChart.setOption(options)
}
</script>

<style lang="scss" scoped></style>



<!-- <template>
	<div>
		<div ref="target" class="w-full h-full"></div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
	data: {
		type: Object,
		required: true
	}
})

const target = ref(null)
let mChart = null

// 伪数据生成
const generateData = () => {
	const voltageLevel = []
	const categoryData = {}
	const colors = []

// 生成2023.1到2023.9的伪数据
for (let i = 2; i <= 9; i++) {
  const year = `2023.${i}`
  voltageLevel.push(year)
  
  // 生成每个年份的项目数据，并按 value 排序
  categoryData[year] = Array.from({ length: 10 }, (_, j) => ({
    name: `Project${j + 1}`,
    value: Math.floor(Math.random() * 100 + 1) // 随机生成每个项目的值
  })).sort((a, b) => b.value - a.value) // 按值从高到低排序


  // 生成不同的颜色
  colors.push(`hsl(${(i * 40) % 360}, 70%, 60%)`)
}


	return {
		voltageLevel,
		categoryData,
		colors
	}
}

const data = ref(generateData()) // 初始化数据

onMounted(() => {
	mChart = echarts.init(target.value)
	renderChart()
})

const renderChart = () => {
	// echarts 渲染
	let options = {
		// 时间线配置
		timeline: {
			data: data.value.voltageLevel,
			axisType: 'category',
			autoPlay: true,
			playInterval: 3000,
			left: '5%',
			right: '5%',
			bottom: '0%',
			width: '90%',
			label: {
				normal: {
					textStyle: {
						color: '#ddd'
					}
				},
				emphasis: {
					textStyle: {
						color: '#fff'
					}
				}
			},
			symbolSize: 10,
			lineStyle: {
				color: '#555'
			},
			checkpointStyle: {
				borderColor: '#888',
				borderWidth: 2
			},
			controlStyle: {
				showNextBtn: true,
				showPrevBtn: true,
				normal: {
					color: '#666',
					borderColor: '#666'
				},
				emphasis: {
					color: '#aaa',
					borderColor: '#aaa'
				}
			}
		},
		baseOption: {
			grid: {
				right: '5%',
				left: '10%',
				top: '15%',
				bottom: '20%',
				width: '85%'
			}
		},
		options: []
	}

	// 为每一季度的图表添加数据
	data.value.voltageLevel.forEach((item, index) => {
		options.options.push({
			title: [
				{
					text: `${item} 项目参与人数Top10`,
					right: '5%',
					top: '2%',
					textStyle: {
						color: '#ccc',
						fontSize: 20
					}
				}
			],
			xAxis: {
				type: 'value',
				scale: true,
				position: 'top',
				splitLine: {
					show: false
				},
				// 最大值（防止触顶）
				max: function (value) {
					// 取整
					return parseInt(value.max * 1.1)
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ddd'
					}
				},
				axisTick: {
					show: true
				},
				axisLabel: {
					margin: 2,
					textStyle: {
						color: '#aaa'
					}
				}
			},
			yAxis: {
				type: 'category',
				axisLine: {
					show: true,
					lineStyle: {
						color: '#ddd'
					}
				},
				// 反向展示
				inverse: true,
				axisTick: {
					show: false
				},
				axisLabel: {
					interval: 0,
					margin: 5,
					textStyle: {
						color: '#ddd'
					}
				},
				data: data.value.categoryData[item].map((item) => item.name)
			},
			series: [
				{
					type: 'bar',
					zlevel: 1.5,
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					},
				// 轴宽度
				// barWidth: 12,
				// 轴上的字体
				label: {
					show: true,
					// 设置标签位置为右侧
					position: 'right',
					textStyle: {
						// 设置标签文本颜色
						color: '#fff'
					}
				},					
					itemStyle: {
						normal: {
							color: data.value.colors[index]
						}
					},
					data: data.value.categoryData[item].map((item) => item.value)
				}
			]
		})
	})

	mChart.setOption(options)
}
</script>

<style lang="scss" scoped></style> -->
